<template>
<div :class="$style.container">
  <div :class="[$style.header]">
    <el-menu :default-active="activeIndex" mode="horizontal" router>
      <el-menu-item :index="row.key" v-for="row in menus" :key="row.key">{{row.label}}</el-menu-item>
    </el-menu>
  </div>
  <div :class="[$style.content]">
    <router-view></router-view>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref } from 'vue-property-decorator'
@Component
export default class Flow extends Vue {
  menus = [
    { key: '/flow/todo', label: '我的待办' },
    { key: '/flow/done', label: '我的已办' },
    { key: '/flow/apply', label: '我的申请' }
  ]

  get activeIndex () {
    const path = this.$route.path
    return path
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 100%;
}

.header {
  background-color: $bg-color;

  :global {
    .el-menu-item {
      height: 40px;
      line-height: 40px;
    }
  }
}

.content {
  box-sizing: border-box;
  height: calc(100% - 44px);
  overflow: auto;
  background-color: #fff;
}

</style>
